<template>
  <div class="page-content">
    <div class="header" style="margin-bottom: 1.5rem">
      <h3>考试相关</h3>
    </div>
    <el-tabs v-model="tableLayout" class="demo-tabs" @tab-change="handleClick">
      <el-tab-pane label="如何约考" name="1"> </el-tab-pane>
      <el-tab-pane label="如何查成绩" name="2"> </el-tab-pane>
    </el-tabs>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px">
      <el-form-item label="手机端约考" prop="shouji" v-if="tableLayout === '1'">
        <div style="max-width: 1000px; width: 100%">
          <ArtWangEditor v-model="ruleForm[0].details" />
        </div>
      </el-form-item>
      <el-form-item label="pc端约考" prop="check" v-if="tableLayout === '1'">
        <div style="max-width: 1000px; width: 100%">
          <ArtWangEditor v-model="ruleForm[1].details" />
        </div>
      </el-form-item>
      <el-form-item label="手机端查成绩" prop="check" v-if="tableLayout === '2'">
        <div style="max-width: 1000px; width: 100%">
          <ArtWangEditor v-model="ruleForm[2].details" />
        </div>
      </el-form-item>
      <el-form-item label="pc端查成绩" prop="check" v-if="tableLayout === '2'">
        <div style="max-width: 1000px; width: 100%">
          <ArtWangEditor v-model="ruleForm[3].details" />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 90px" v-if="!isEdit" @click="edit">
          编辑
        </el-button>
        <el-button
          type="primary"
          style="width: 90px"
          v-if="isEdit"
          @click="handleSave"
          :loading="btnLoding"
        >
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
  import { ElMessage } from 'element-plus'
  import type { FormRules } from 'element-plus'
  import { saveSettings, getSettings } from '@/api/driverSchoolApi'

  const tableLayout = ref('1')
  const handleClick = (e: any) => {
    console.log(e, 'e===')
    tableLayout.value = e
  }

  const ruleForm = ref([
    {
      categoryId: 0,
      carId: 0,
      type: '05',
      details: ''
    },
    {
      categoryId: 0,
      carId: 0,
      type: '06',
      details: ''
    },
    {
      categoryId: 0,
      carId: 0,
      type: '07',
      details: ''
    },
    {
      categoryId: 0,
      carId: 0,
      type: '08',
      details: ''
    }
  ])

  const isEdit = ref(false)
  const btnLoding = ref(false)

  const rules = reactive<FormRules>({
    shouji: [{ required: true, message: '不能为空', trigger: 'blur' }],
    check: [{ required: true, message: '不能为空', trigger: 'blur' }]
  })

  const edit = () => {
    isEdit.value = !isEdit.value
  }

  const handleSave = async () => {
    isEdit.value = !isEdit.value
    try {
      btnLoding.value = true
      const settingVos = ruleForm.value
      const res = await saveSettings({ settingVos })
      if (res.code === '00000') {
        ElMessage.success('保存成功')
      }
    } catch (e) {
    } finally {
      btnLoding.value = false
    }
  }
  const getSettingsData = async () => {
    try {
      const res = await getSettings(0)
      if (res.code === '00000' && res.data) {
        ruleForm.value = res.data.map((e: any) => {
          return {
            categoryId: e.categoryId,
            carId: e.carId,
            type: e.type,
            details: e.details
          }
        })
      }
    } catch (error) {
      console.error('获取设置数据失败:', error)
    }
  }

  onMounted(() => {
    getSettingsData()
  })
</script>

<style lang="scss" scoped></style>
